<template>
  <el-row>
    <h1>cURL生成网络请求</h1>
    <div class="radioView">
      <el-radio v-model="radio" label="1" v-on:change="changeRadioVual()">Nodejs</el-radio>
      <el-radio v-model="radio" label="2" v-on:change="changeRadioVual()">Python</el-radio>
      <el-radio v-model="radio" label="3" v-on:change="changeRadioVual()">PHP</el-radio>
    </div>
    <el-col :span="10">
      <el-input  type="textarea" resize="none" :autosize="{ minRows: 31, maxRows: 31}" placeholder="请输入内容"
                 v-model="inputTextarea">
      </el-input>
    </el-col>
    <el-col :span="5" class="createBtn">
      <el-button type="primary" v-on:click="getModelContent">转化</el-button>
    </el-col>

    <el-col :span="10" >
      <el-input  type="textarea" resize="none" :autosize="{ minRows: 31, maxRows: 31}"  placeholder="输出"
                 v-model="outputTextareaS">
      </el-input>
    </el-col>

  </el-row>

</template>

<script>

  import { getApplinziINodeCURL  } from '../../api/httpApi'

  export default {
    name: "nodecURLHttp",
    data() {
      return {
        inputTextarea: '',
        outputTextareaS: '',
        radio: '1'
      }
    },
    created() {
      // 初始化
      console.log("created");

    },
    mounted() {
      // 延迟方法
      console.log("mounted");
      //this.getModelContent()
    },
    beforeUpdate() {
      // 事件变化前
      console.log("beforeUpdate");
    },
    updated() {
      // 事件变化
      console.log("updated");
    },
    beforeDestory() {
      // 销毁
      console.log("beforeDestory");
    },
    methods: {
      changeRadioVual(){
        this.outputTextareaS = ""
        console.log(this.radio);
      },
      // 方法
      getModelContent() {

        var data = {
          curl: this.inputTextarea ,
          radio: this.radio
        }
        getApplinziINodeCURL(data).then((res)=>{
          var rt = res.data;
          if (rt.code === 0){
            var data = rt.data
            console.log(data);
            this.outputTextareaS = data
          }
        })


      }
    }
  }
</script>

<style scoped>
  .createBtn{
    width: 16%;
    align-content: center;
    text-align: center;
    margin-top: 320px;

  }
  h1{
    text-align: center;
    color: #333333;
    font-size: 2rem;
    margin-bottom: 20px;
  }
  .radioView{
    display: block;
    height: 30px;
    text-align: center;
  }
  .outputTextareaH{
    margin-bottom: 10px;
  }
</style>
